




<!--

:workflowId // 流程id
@workflowData // 向外抛出去的参数

-->


<template>
  <div class="position-relative table-responsive1">
    <table class="table">
      <tbody>
      <!-- 基本参数选项设置    判断参数 showGlobalParameter -->
      <tr v-show="showGlobalParameter">
        <td>
          <!--基本参数的头部和下拉更多-->
          <div class="tbHeader">
            <span style="float: left">基本参数：</span>
            <CButton
                class="hoverstyle imgBtn"
                id="globalParamId"
                :title="'显示更多参数'"
                variant="outline"
                color="info"
                :flag="'hidden'"
                @click="displayInputDtParamBtn('globalBtn')"
            >
              <img class="jia" :src="tdRightImg('plus')" alt />
            </CButton>
          </div>
          <CDataTable
              :key="Math.random()"
              :items="globalItemsDisplayItems"
              :fields="fields"
              class="paramTable"
              :header="haveHeader"
              border
              hover
          >
            <template #label="{ item }">
                  <td
                      v-if="!item.selectItem"
                      :title="`${item.type.name}${
                                          item.type.plural === true ||
                                          item.type.plural === 'true'
                                            ? '数组'
                                            : ''
                                        }`"
                  >
                                        <span
                                            v-if="item.mandatory != null && item.mandatory"
                                            style="color: red"
                                        >*</span
                                        >
                    {{ item.label }}
                  </td>
            </template>
            <template #value="{ item }" style="width: 60%">
              <div v-if="!item.selectItem">
                <!--下拉-->
                <CSelect
                    v-if="item.type.name.toLowerCase() === 'select'"
                    horizontal
                    :options="item.constraint"
                    :value.sync="item.default"
                    class="inputSelectTd"
                    placeholder="请选择"
                    @update:value="
                                              selectChange(
                                                $event,
                                                item,
                                                globalItemsDisplayItems
                                              )
                                            "
                ></CSelect>
                <!--单选-->
                <CSelect
                    v-else-if="
                                              item.type.name.toLowerCase() === 'boolean'
                                            "
                    horizontal
                    :options="[
                                              { label: '请选择', value: '' },
                                              { label: '是', value: true },
                                              { label: '否', value: false },
                                            ]"
                    :value.sync="item.default"
                    class="inputSelectTd"
                ></CSelect>
                <!--判断 dir 进行文件选择-->
                <div
                    v-else-if="
                                              item.type.name.toLowerCase() === 'dir'
                                            "
                >
                  <template>
                    <div style="display: flex">
                    <CInput
                        v-model="item['default']"
                        clearable
                        autocomplete="off"
                        class="inputTd"
                        :title="item.default"
                        :placeholder="`${item.desc}`"
                    />
                      <RadioGroup v-model="item['tuisong']" @on-change="radioGroupChange(item)">
                        <Radio label="proDir">生产目录</Radio>
                        <Radio label="scanDir">扫描目录</Radio>
                      </RadioGroup>
                      <CButton
                          color="info"
                          size="sm"
                          @click="browserFile(item)"
                          class="btnBrowser system-btn-style"
                      >...
                      </CButton>
                    </div>
                  </template>
                </div>
                <!--判断 file 进行文件选择-->
                <div
                    v-else-if="
                                              item.type.name.toLowerCase() === 'file'
                                            "
                >
                  <template horizontal>
                    <div style="display: flex">
                    <CInput
                        v-model="item.default"
                        clearable
                        autocomplete="off"
                        class="inputTd"
                        :title="item.default"
                        :placeholder="`${item.desc}`"
                    />
                    <RadioGroup v-model="item['tuisong']" @on-change="radioGroupChange(item)">
                      <Radio label="proDir">生产目录</Radio>
                      <Radio label="scanDir">扫描目录</Radio>
                    </RadioGroup>
                    <CButton
                        color="info"
                        size="sm"
                        @click="browserFile(item)"
                        class="btnBrowser system-btn-style"
                    >...
                    </CButton>
                    </div>
                  </template>
                </div>
                <!--判断 spatialref 进行文件选择-->
                <div v-else-if="item.type.name.toLowerCase() === 'spatialref' ">
                  <template>
                    <div style="display: flex">
                    <CInput
                        v-model="item.default"
                        clearable
                        autocomplete="off"
                        class="inputTd"
                        :title="item.default"
                        :placeholder="`${item.desc}`"
                    />
                      <RadioGroup v-model="item['tuisong']" @on-change="radioGroupChange(item)">
                        <Radio label="proDir">生产目录</Radio>
                        <Radio label="scanDir">扫描目录</Radio>
                      </RadioGroup>
                    <CButton
                        color="info"
                        size="sm"
                        @click="browserRef(item)"
                        class="btnBrowser system-btn-style"
                    >...
                    </CButton>
                    </div>
                  </template>
                </div>
                <!--判断float 输入框并进行值的校验-->
                <div
                    v-else-if="
                                              item.type.name.toLowerCase() === 'float' ||
                                              item.type.name.toLowerCase() === 'double' ||
                                              item.type.name.toLowerCase() === 'int'
                                            "
                    class="inputTd"
                >
                  <Form
                      :model="item"
                      :rules="ruleCustom"
                      ref="item"
                  >
                    <FormItem
                        prop="default"
                        :rules="[
                                                  {
                                                    validator: (rule, value, callback) => {
                                                      let data = item;
                                                      if (
                                                        !data.hasOwnProperty('constraint')
                                                      )
                                                        callback();
                                                      let min = data.constraint.min;
                                                      let max = data.constraint.max;
                                                      let num = parseFloat(value);
                                                      var reg = /-?[0-9]*\.?[0-9]+/;
                                                      if (
                                                        new RegExp(reg).test(value) == false
                                                      ) {
                                                        if (max == undefined) {
                                                          callback(
                                                            '请输入' + min + '以上的值'
                                                          );
                                                        } else
                                                          callback(
                                                            '请输入' +
                                                              min +
                                                              '-' +
                                                              max +
                                                              '之间的值'
                                                          );
                                                      } else {
                                                        if (max == undefined) {
                                                          if (num >= min) callback();
                                                          else
                                                            callback(
                                                              '请输入' + min + '以上的值'
                                                            );
                                                        } else {
                                                          if (num >= min && num <= max)
                                                            callback();
                                                          else {
                                                            if (max == undefined)
                                                              callback(
                                                                '请输入' + min + '以上的值'
                                                              );
                                                            else
                                                              callback(
                                                                '请输入' +
                                                                  min +
                                                                  '-' +
                                                                  max +
                                                                  '之间的值'
                                                              );
                                                          }
                                                        }
                                                      }
                                                    },
                                                  },
                                                ]"
                    >
                      <Input
                          v-model="item.default"
                          clearable
                          autocomplete="off"
                          placeholder="请输入数字"
                          number
                      />
                    </FormItem>
                  </Form>
                </div>
                <!--  dem_select  select可以下拉或者 file-->
                <div
                    v-else-if="
                                              item.type.name.toLowerCase() ===
                                                'dem_select' ||
                                              item.type.name.toLowerCase() ===
                                                'base_index_select' ||
                                              item.type.name.toLowerCase() === 'ref_select'
                                            "
                >
                  <template>

                    <i-select
                        v-show="item.constraint.demCodeShow"
                        class="inputTd"
                        :id="`${item.name}`"
                        :ref="`${item.name}`"
                        v-model="item.default"
                        filterable
                        transfer
                    >
                      <i-option
                          v-for="item1 in item.constraint.values"
                          :value="item1.value"
                          :key="item1.value"
                      >{{ item1.label }}
                      </i-option>
                    </i-select>
                    <!-- <CButton
                                                  color="info"
                                                  size="sm"
                                                  @click="switchDemType(item)"
                                                  class="btnBrowser"
                                                  >d</CButton
                                                > -->
                  </template>

                  <template>
                    <div v-show="!item.constraint.demCodeShow">
                      <div style="display: flex">
                      <CInput
                          v-model="item['default']"
                          clearable
                          autocomplete="off"
                          class="inputTd"
                          :title="item.default"
                          :placeholder="`${item.desc}`"
                      />
                        <RadioGroup v-model="item['tuisong']" @on-change="radioGroupChange(item)">
                          <Radio label="proDir">生产目录</Radio>
                          <Radio label="scanDir">扫描目录</Radio>
                        </RadioGroup>
                      <CButton
                          color="info"
                          size="sm"
                          @click="browserFile(item)"
                          class="btnBrowser system-btn-style"
                      >...
                      </CButton>
                        </div>
                    </div>
                  </template>
                </div>
                <!--input输入框-->
                <Input
                    v-else
                    v-model="item.default"
                    clearable
                    class="inputTd"
                    :placeholder="`${item.desc}`"
                />
              </div>
            </template>
             </CDataTable>
          </td>
      </tr>
      <!--动态主题参数-->
      <tr
          v-for="(item2, index) in inputDisplayParamItems"
          :key="index"
          v-show="showInputParameter"
      >
      <td>
        <!--头部信息和更多下拉选择-->
        <div class="tbHeader">
          <span style="float: left">{{ item2.groupName }}</span>
          <CButton
              :id="`${item2.groupName}_${index}`"
              class="hoverstyle imgBtn"
              :title="'显示更多参数'"
              variant="outline"
              color="info"
              :flag="'display'"
              @click="displayInputDtParamBtn(item2, index)"
          >
            <img class="jia" :src="tdRightImg('plus')" alt />
          </CButton>
        </div>

        <CDataTable
            :key="Math.random()"
            :items="item2"
            :fields="fields"
            :class="
                                  `${item2.length}` < 1
                                    ? 'paramTable paramTable1 '
                                    : 'paramTable'
                                "
            :header="haveHeader"
            border
            hover
        >
          <template #label="{ item }">
      <td
          v-if="!item.selectItem"
          :title="`${item.type.name}${
                                      item.type.plural === true ||
                                      item.type.plural === 'true'
                                        ? '数组'
                                        : ''
                                    }`"
      >
        <!-- 必填项前边加 *  -->
        <span
            v-if="item.mandatory != null && item.mandatory"
            style="color: red"
        >*</span
        >
        {{ item.label }}
      </td>
      </template>
      <template #value="{ item }" style="width: 60%">
        <div v-if="!item.selectItem">
          <!--下拉-->
          <CSelect
              v-if="item.type.name.toLowerCase() === 'select'"
              horizontal
              :options="item.constraint"
              :value.sync="item.default"
              class="inputSelectTd"
              placeholder="请选择"
              @update:value="
                                        selectChange($event, item, item2)
                                      "
          ></CSelect>
          <!--单选-->
          <CSelect
              v-else-if="
                                        item.type.name.toLowerCase() === 'boolean'
                                      "
              horizontal
              :options="[
                                        { label: '请选择', value: '' },
                                        { label: '是', value: true },
                                        { label: '否', value: false },
                                      ]"
              :value.sync="item.default"
              class="inputSelectTd"
          ></CSelect>
          <!--  dem_select  select可以下拉或者 file-->
          <div
              v-else-if="
                                        item.type.name.toLowerCase() ===
                                          'dem_select' ||
                                        item.type.name.toLowerCase() ===
                                          'base_index_select' ||
                                        item.type.name.toLowerCase() === 'ref_select'
                                      "
          >
            <template>
              <i-select
                  v-show="item.constraint.demCodeShow"
                  class="inputTd"
                  :id="`${item.name}`"
                  :ref="`${item.name}`"
                  v-model="item.default"
                  filterable
                  transfer
              >
                <i-option
                    v-for="item1 in item.constraint.values"
                    :value="item1.value"
                    :key="item1.value"
                >{{ item1.label }}
                </i-option>
              </i-select>
              <!-- <CButton
                                            color="info"
                                            size="sm"
                                            @click="switchDemType(item)"
                                            class="btnBrowser"
                                            >d</CButton
                                          > -->
            </template>

            <template>
              <div v-show="!item.constraint.demCodeShow">
                <div style="display: flex">
                <CInput
                    v-model="item['default']"
                    clearable
                    autocomplete="off"
                    class="inputTd"
                    :title="item.default"
                    :placeholder="`${item.desc}`"
                />
                <RadioGroup v-model="item['tuisong']" @on-change="radioGroupChange(item)">
                  <Radio label="proDir">生产目录</Radio>
                  <Radio label="scanDir">扫描目录</Radio>
                </RadioGroup>
                <CButton
                    color="info"
                    size="sm"
                    @click="browserFile(item)"
                    class="btnBrowser system-btn-style"
                >...
                </CButton>
                </div>
              </div>
            </template>
          </div>

          <!--文件选项 dir-->
          <div
              v-else-if="
                                        item.type.name.toLowerCase() === 'dir'
                                      "
          >
            <template>
              <div style="display: flex">
              <CInput
                  v-model="item.default"
                  clearable
                  autocomplete="off"
                  class="inputTd"
                  :title="item.default"
                  :placeholder="`${item.desc}`"
              />
                <RadioGroup v-model="item['tuisong']" @on-change="radioGroupChange(item)">
                  <Radio label="proDir">生产目录</Radio>
                  <Radio label="scanDir">扫描目录</Radio>
                </RadioGroup>
              <CButton
                  color="info"
                  size="sm"
                  @click="browserFile(item)"
                  class="btnBrowser system-btn-style"
              >...
              </CButton>
              </div>
            </template>
          </div>
          <!--文件选项 file-->
          <div
              v-else-if="
                                        item.type.name.toLowerCase() === 'file'
                                      "
          >
            <template horizontal>
              <div style="display: flex">
              <CInput
                  v-model="item.default"
                  clearable
                  autocomplete="off"
                  class="inputTd"
                  :title="item.default"
                  :placeholder="`${item.desc}`"
              />
              <RadioGroup v-model="item['tuisong']" @on-change="radioGroupChange(item)">
                <Radio label="proDir">生产目录</Radio>
                <Radio label="scanDir">扫描目录</Radio>
              </RadioGroup>
              <CButton
                  color="info"
                  size="sm"
                  @click="browserFile(item)"
                  class="btnBrowser system-btn-style"
              >...
              </CButton>
              </div>
            </template>
          </div>
          <!--文件夹选择 spatialref-->
          <div
              v-else-if="
                                        item.type.name.toLowerCase() === 'spatialref'
                                      "
          >
            <template>
              <CInput
                  v-model="item.default"
                  clearable
                  autocomplete="off"
                  class="inputTd"
                  :title="item.default"
                  :placeholder="`${item.desc}`"
              />
              <CButton
                  color="info"
                  size="sm"
                  @click="browserRef(item)"
                  class="btnBrowser system-btn-style"
              >...
              </CButton>
            </template>
          </div>
          <!-- <CInput v-else v-model="item.default" class="inputTd"></CInput> -->
          <!--未知状态 float-->
          <div
              v-else-if="
                                        item.type.name.toLowerCase() === 'float' ||
                                        item.type.name.toLowerCase() === 'double' ||
                                        item.type.name.toLowerCase() === 'int'
                                      "
              class="inputTd"
          >
            <Form
                :model="item"
                :rules="ruleCustom"
                ref="item"
            >
              <FormItem
                  prop="default"
                  :rules="[
                                            {
                                              validator: (rule, value, callback) => {
                                                let data = item;
                                                if (
                                                  !data.hasOwnProperty('constraint')
                                                )
                                                  callback();
                                                let min = data.constraint.min;
                                                let max = data.constraint.max;
                                                let num = parseFloat(value);
                                                var reg = /-?[0-9]*\.?[0-9]+/;
                                                if (
                                                  new RegExp(reg).test(value) == false
                                                ) {
                                                  if (max == undefined) {
                                                    callback(
                                                      '请输入' + min + '以上的值'
                                                    );
                                                  } else
                                                    callback(
                                                      '请输入' +
                                                        min +
                                                        '-' +
                                                        max +
                                                        '之间的值'
                                                    );
                                                } else {
                                                  if (max == undefined) {
                                                    if (num >= min) callback();
                                                    else
                                                      callback(
                                                        '请输入' + min + '以上的值'
                                                      );
                                                  } else {
                                                    if (num >= min && num <= max)
                                                      callback();
                                                    else {
                                                      if (max == undefined)
                                                        callback(
                                                          '请输入' + min + '以上的值'
                                                        );
                                                      else
                                                        callback(
                                                          '请输入' +
                                                            min +
                                                            '-' +
                                                            max +
                                                            '之间的值'
                                                        );
                                                    }
                                                  }
                                                }
                                              },
                                            },
                                          ]"
              >
                <Input
                    v-model="item.default"
                    clearable
                    autocomplete="off"
                    placeholder="请输入数字"
                    number
                />
              </FormItem>
            </Form>
          </div>

          <Input
              v-else
              v-model="item.default"
              clearable
              class="inputTd"
              :placeholder="`${item.desc}`"
              :title="item.default"
              number
          />
        </div>
      </template>
      </CDataTable>
      </td>
      </tr>
      <!--高级设置-->
      <tr>
      <td>
        <!--基本参数的头部和下拉更多-->
        <div class="tbHeader">
                                <span style="float: left"
                                >高级设置：
                                  <Icon
                                      type="ios-arrow-forward"
                                      v-show="!advancedSetting"
                                      @click="showAdvancedSetting"
                                  />
                                  <Icon
                                      type="ios-arrow-down"
                                      v-show="advancedSetting"
                                      @click="advancedSetting = false"
                                  />
                                </span>
        </div>
      </td>
      </tr>
      <tr>
      <td v-show="advancedSetting">
        <!--基本参数的头部和下拉更多-->
        <div
            style="
                                  display: flex;
                                  text-align: left;
                                  align-items: center;
                                  background-color: #f9f9f9;
                                "
        >
          <div
              style="
                                    width: 170px;
                                    display: flex;
                                    justify-content: end;
                                  "
          >
            计算分配策略：
          </div>
          <Select
              v-model="pieRuntime.nodeSelector"
              style="width: 345px"
          >
            <Option
                v-for="item in nodeGroupList"
                :value="item.groupLabel"
                :key="item.groupName"
            >{{ item.groupName }}</Option
            >
          </Select>
        </div>
      </td>
      </tr>
      <tr>
      <td v-show="advancedSetting">
        <!--基本参数的头部和下拉更多-->
        <div
            style="
                                  display: flex;
                                  text-align: left;
                                  align-items: center;
                                  background-color: #f9f9f9;
                                "
        >
          <div
              style="
                                    width: 170px;
                                    display: flex;
                                    justify-content: end;
                                  "
          >
            执行跳过环节：
          </div>
          <Select
              v-model="pieRuntime.filterPreferenceData"
              style="width: 345px"
              multiple
          >
            <Option
                v-for="item in filterPreference"
                :value="item.value"
                :key="item.label"
            >{{ item.label }}</Option
            >
          </Select>
        </div>
      </td>
      </tr>
      </tbody>
    </table>
<file-catalog
    ref="refFileCatalogModal"
    v-if="fileCatalogModal"
    :modalShow="fileCatalogModal"
    @closed="fileCatalogModalClose"
    @menuOk="fileCatalogModalOk"
></file-catalog>
<SpatialReferenceManage
    ref="refSpatialRefManageModal"
    v-if="spatialRefManageModal"
    :modalShow="spatialRefManageModal"
    @closed="spatialRefManageModalClose"
    @spatialRefOk="spatialRefManageModalOk"
></SpatialReferenceManage>
  </div>
</template>

<script>
import FileCatalog from "../../views/jobProcess/fileCatalog";
import SpatialReferenceManage from "../../views/jobProcess/spatialReferenceManage";
const fields = [
  { key: "label", label: "参数名称", _style: "width:20%;" },
  { key: "value", label: "参数值", _style: "width:80%;" },
];
export default {
  name: "canShu",
  props:{
    workflowId:{
      type: String|Number,
     /* required: true*/
    }
  },
  data(){
    var validateCount = (rule, value, callback) => {
      if (!Number.isInteger(+value)) {
        callback(new Error("请输入数字"));
      } else if (Number.isInteger(+value)) {
        let length = value.length;
        if (length < 3) {
          callback(new Error("请输入长度为3的数字"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    return {
      fileCatalogModal: false,
      spatialRefManageModal: false,
      globalDisplayBtn: false, //基本参数的显示按钮展开状态
      showInputParameter: false,
      showGlobalParameter: false,
      inputMandatoryFlag: true, //记录算法参数必填项是否为空
      globalMandatoryFlag: true, //记录全局参数必填项是否为空
      validateCount: validateCount,
      ruleCustom: {
        count: [
          { required: true, message: "数量不能为空", trigger: "blur" },
          { validator: validateCount, trigger: "blur" },
        ],
        default: [
          { required: true, message: "请输入数字", trigger: "blur" },
          { validator: validateCount, trigger: "blur" },
        ],
      },
      isBatch: true,
      id: "", //流程线父(组)ID
      type: "", //流程类型 image：影像 parameter：参量
      taskType: "", //提交任务类型
      userName: "",
      options: [
        //优先级
        { label: "普通", value: "0", isCheck: true },
      ],

      /***************** start 以下为参量属性设置 ************************/
      currentTime: new Date(),
      mixTypeValue: "Min",
      productionTypeValue: "单景产品",
      region: {
        name: "",
        geometry: "",
      },




      inputDisplayParamItems: [], //算法参数表格默认显示
      globalItemsDisplayItems: [], //基本参数表格默认显示

      inputParamItems: [], //表格显示和隐藏全部参数 用于提交数据
      hiddenImputDtParam: [], //算法参数表格隐藏参数 用于显示更多和隐藏
      displayInputDtParam: [], //算法参数表格显示参数
      globalItems: [], //基本参数表格全部数据 用于提交数据
      hiddenGlobalDtParam: [], //基本参数表格隐藏参数 用于显示更多和隐藏 暂时功能没有用到
      displayGlobalDtParam: [], //基本参数表格显示参数
      fields,
      currentItem: "",
      haveHeader: false,

      /*高级设置选项*/
      advancedSetting: false,
      nodeGroupList: [],
      filterPreference: [], //过滤参数
      pieRuntime: {
        nodeSelector: "",
        filterPreferenceData: new Set(),
      },

    };
  },
  components: {
    FileCatalog,
    SpatialReferenceManage,
  },
  watch: {
    $route: {
      handler() {
        this.id = this.$route.params.id;
        this.type = this.$route.params.type;
       // this.getProduct();
      },
      deep: true,
    },
    workflowId: {
      handler(newData) {
        if (!newData) return
        this.getProcessParamsByWorkflowId(newData);
        this.filterPreferenceData(newData);
      },
      immediate:true
    }
  },

  mounted() {
    this.getNodeGroupList();
    this.userName = window.sessionStorage.getItem("user");

  },

  methods:{
    radioGroupChange(item){
      item.default = "";
    },


    //流程任务执行
    getWorkflowData() {
      let _this = this;
      let defaultParam = { inputParam: [] };
      defaultParam.globalParam = this.globalItems; //globalParam
      defaultParam.multiImage = !this.isBatch;

      _this.dealWithSubmitInputParameter(defaultParam);
      // 基本参数
     /* _this.dealWithSubmitGlobalParameter();
      if (this.globalMandatoryFlag == false) {return} else {
        //算法参数
        _this.dealWithSubmitInputParameter(defaultParam);
        if (this.inputMandatoryFlag == false) {
          return;
        }
      }*/
      let department = _this.$store.state.user.department;
      if( !this.pieRuntime.filterPreferenceData.length){this.pieRuntime.filterPreferenceData = []}
      let params = {
        item: JSON.stringify(defaultParam),   // 这个是主要参数
        workflowId: this.workflowId,
        taskType: this.taskType, //1 质检 2 数据处理
        taskOwner: this.userName,
        department: !department ? "" : department,
        skipTaskReferenceNames: this.pieRuntime.filterPreferenceData, //过滤算法字段
      };
      // 处理高级选项设置
      if (!this.pieRuntime.nodeSelector) {
        delete this.pieRuntime.nodeSelector;
      } else {
        this.pieRuntime.nodeSelector = JSON.parse(
            _this.pieRuntime.nodeSelector
        );
      }
      params.runtime = JSON.parse(JSON.stringify(_this.pieRuntime));   // 模式
    /*  this.$emit("workflowData", params);*/
      return params
    },

    //radio算法选择显示流程参数切换
    searchProductLine(item, index) {
      this.workflowId = item.id;

      this.getProcessParamsByWorkflowId();
      // 获取高级选项
      this.filterPreferenceData(this.workflowId);
    },



 /**
  * 根据流程id获取流程参数信息
  * */
    getProcessParamsByWorkflowId(data) {

      String.prototype.bool = function () {
        return /^true$/i.test(this);
      };

      let _this = this;
      this.globalDisplayBtn = false;
      let token = window.sessionStorage.getItem("PIECloud-Token");
      // if (!token) return;
      let path = _this.$api.processingApi.searchProcessParameters;
      let param = {
        userName: _this.userName,
        workFlowId: data,
      };
      _this.http
          .get(path, param)
          .then((res) => {
            _this.displayInputDtParam = []; //表格显示数据置空
            _this.hiddenImputDtParam = [];
            let data = res.data;
            if (data.success) {
              let params = JSON.parse(data.data.processParameters);

              let inputParam = params.inputParam;
              let globalParam = params.globalParam;
              //批量拆分的标识入口 默认是单景的 即批量的数据 （单景和多景的数据都支持文件多选）
              // 这个参数是描述流程本身的，多景处理为true表示流程本身能一次处理多景数据，所以不支持批量拆分，
              // 多景处理默认是false，表示流程本身一次只能处理一景数据，但是提交任务的时候可以批量拆分成多个任务进行并行处理
              let multiImage = JSON.parse(data.data.processParameters).multiImage;

              if (typeof multiImage === "boolean") {
                this.isBatch = !multiImage;
              } else {
                this.isBatch = multiImage ? !multiImage.bool() : true;
              }
              //基本参数的显示和隐藏
              if (globalParam) {
                _this.dealWithGlobalParameterBeforeRender(globalParam);
              }
              //算法参数显示&&隐藏
              this.showInputParameter = true;
              for (let i = 0; i < inputParam.length; i++) {
                let workflowInputKey = inputParam.workflowInputKey;
                _this.dealWithAlgoParameterBeforeRender(inputParam[i]);
              }

              _this.inputDisplayParamItems = this.displayInputDtParam; //inputParam;
              _this.inputParamItems = inputParam; //表格参数全部数据

              if (!globalParam || globalParam.length < 1) {
                // if (this.displayGlobalDtParam.length < 1) {
                _this.showGlobalParameter = false;
                _this.showInputParameter = true;

                _this.globalItemsDisplayItems = [];
                _this.globalItems = undefined;
              } else {
                _this.showGlobalParameter = true;
                _this.showInputParameter = false;
                _this.globalItemsDisplayItems = this.displayGlobalDtParam;
                _this.globalItems = globalParam;
                // _this.globalItems = JSON.parse(JSON.stringify(globalParam)); //deep copy
              }
              this.huiXianCanShu()

            } else {
              _this.$Message.error(res.data.message);
            }
            _this.$nextTick(() => {
              _this.setDisplayHidBtnStyle();
            });
          })
          .catch((err) => {
            console.log(err);
          });
    },


    dealWithGlobalParameterBeforeRender(param) {
      let _this = this;
      let display = [];
      let hidden = [];
      for (let i = 0; i < param.length; i++) {
        let tempValue = param[i];
        //将selet类型的值有字符串转数字
        var Regx = /^[0-9]+$/;
        if (Regx.test(tempValue.default)) {
          if (tempValue.type.name === "select" && tempValue.default) {
            tempValue.default = parseInt(tempValue.default);
          }
        }
        this.commonBeforeRender(tempValue);

        // 控制文件夹全路径
        if (tempValue.label == "输出路径类型" && param) {
          this.selectChange(tempValue.default, tempValue, param);
        }
        //控制基本参数的显示和隐藏
        if (tempValue.display && tempValue.display.tag) {
          display.push(tempValue);
        } else {
          // count++;
          hidden.push(tempValue);
        }
      }
      // if (count == param.length) {
      //   this.showGlobalParameter = false;
      // }
      // if (hidden.length < 1) hidden.isDisplay = false;
      _this.hiddenGlobalDtParam = hidden; //显示和隐藏的时候需要更新维护 暂时没有用到
      _this.displayGlobalDtParam = display; //只在表格初始化的时候用一次
    },
    dealWithAlgoParameterBeforeRender(data) {
      let _this = this;
      let display = [];
      let hidden = [];
      let isHaveParameterShow = true; //用于标识算法参数是否全部隐藏了 是 则界面不显示算法的名字（参数的显示隐藏由流程编排复选框控制）
      let count = 0;
      for (let j = 0; j < data.length; j++) {
        let tempValue = data[j];
        let defaultVal = tempValue.default;

        // 控制文件夹全路径
        if (tempValue.label == "输出路径类型" && data) {
          this.selectChange(tempValue.default, tempValue, data);
        }

        //select类型数据单独处理（处理default为object情况 正确为字符串或者数字、boolean等）
        if (
            tempValue.type.name.toLowerCase() === "select" &&
            typeof defaultVal === "object"
        ) {
          tempValue.default = defaultVal.value;
        }
        this.commonBeforeRender(tempValue);
        //元数据算法控制生产员 质检员显示
        if (
            tempValue.groupAlgoId === "piesat.basic.create_metadata" ||
            tempValue.groupAlgoId == "piesat.basic.create_metadatapainv"
        ) {
          if (_this.taskType == 1 && tempValue.label.indexOf("生产员") != -1) {
            //质检
            data.splice(j, 1); //删除索引i的1个元素
            j--; //必须有
            continue;
          } else if (
              _this.taskType == 2 &&
              tempValue.label.indexOf("质检员") != -1
          ) {
            //处理加工
            data.splice(j, 1);
            j--;
            continue;
          }

          let value = "";
          if (tempValue.label.indexOf("姓名") != -1) {
            value = window.sessionStorage.getItem("user");
            tempValue.default = !value ? "" : value;
          }
          if (tempValue.label.indexOf("部门") != -1) {
            value = _this.$store.state.user.department; //产品的版本可以注释掉
            tempValue.default = !value ? "" : value;
          }
        }

        /**前端界面显示分两种 第二种取决于第一种
         *  第一种（优先级高） 根据流程编排的参数复选框的选择状态判断(display.tag):
         *  若打钩显示（则逻辑+第二种）   若不勾 页面不管是显示更多还是隐藏都不显示 但执行时该参数信息仍然传到后端
         *  第二种 根据参数值（default）有无判断 有(display.value=false) 不显示 没有 则显示
         **/

        /**后端逻辑：
         * 1.流程编排的参数display=true时  tag 为 true;
         *  参数值为空  value:true; 参数值不为空时value:false; 所以当display是true,参数值为空时:display：{tag:true,value:true}
         *  2.display为false tag和value  都是false 前端不予显示*/

        // 只有当tag为true时 再判断参数值是否为空问题
        // tag为false时,则不考虑，界面始终不显示
        if (tempValue.hasOwnProperty("display") && tempValue.display.tag) {
          if (tempValue.display.value) display.push(tempValue);
          else hidden.push(tempValue);
        } else {
          // 在界面不显示 但是执行时该值将传到算法中
          count++;
        }
      }

      if (count == data.length) {
        isHaveParameterShow = false;
      }

      // 显示&&隐藏控制（显示更多和隐藏数据）
      if (!isHaveParameterShow) return;
      if (hidden.length < 1) hidden.isDisplay = false;

      display.groupName = data[0].groupName;
      hidden.groupName = data[0].groupName;

      _this.hiddenImputDtParam.push(hidden); //显示和隐藏的时候需要更新维护
      _this.displayInputDtParam.push(display); //只在表格初始化的时候用一次
    },
    // 回显参数  处理
    huiXianCanShu() {
      if (!this.$route.query.data) return;
      let routeData = JSON.parse(this.$route.query.data.flowKey);
      let taskParameter = JSON.parse(this.$route.query.data.taskParameter);

      // 处理高级参数
      this.pieRuntime.filterPreferenceData=  taskParameter.runtime.filterPreferenceData
      this.pieRuntime.nodeSelector=  JSON.stringify(taskParameter.runtime.nodeSelector)


      this.globalItemsDisplayItems.forEach((item)=>{   // 基本参数
        let defauleData = routeData[item.workflowInputKey];  // 取出 workflowInputKey 的值
        if (defauleData==="proDir"|| defauleData==="scanDir") {

         item.tuisong=defauleData
        }else {

          item.default = defauleData;
        };
      })
      this.inputDisplayParamItems.forEach((item) => { // 动态参数
        item.forEach((list) => {
          let defauleData = routeData[list.workflowInputKey];  // 取出 workflowInputKey 的值
          if (defauleData==="proDir"|| defauleData==="scanDir") {
            list.tuisong=defauleData

          }else {

            list.default = defauleData;
          }
        })
      });
    },

      //基本参数和算法参数的特殊处理
      commonBeforeRender(tempValue) {
        if (
            (tempValue.type.name.toLowerCase() === "double" ||
                tempValue.type.name.toLowerCase() === "float" ||
                tempValue.type.name.toLowerCase() === "int") &&
            tempValue.default
        ) {
          tempValue.default = Number(tempValue.default);
        }

        if (tempValue.type.name.toLowerCase() === "json_object") {
          if (tempValue.default instanceof Object == true)
            tempValue.default = JSON.stringify(tempValue.default);
        }
        if (tempValue.type.name.toLowerCase() === "project_image") {
          if (
              tempValue.default != null &&
              tempValue.default instanceof Array == true
          )
            tempValue.default = JSON.stringify(tempValue.default);
        }

        // dem_select：用于选择dem数据，值为数组格式
        // ref_select：用于选择参考影像，值为数组格式；
        // base_index_select：用于选择基准索引，值为字符串file类型 不是数组；
        let nameType = tempValue.type.name.toLowerCase();
        if (
            nameType.indexOf("dem_select") != -1 ||
            nameType.indexOf("base_index_select") != -1 ||
            nameType.indexOf("ref_select") != -1
        ) {
          if (!tempValue.constraint) {
            tempValue.constraint = {};
          }
          tempValue.constraint.values = [];
          tempValue.constraint.demCodeShow = true;
          this.getDemOptions(tempValue, tempValue.type.name);
        }
      },
      getDemOptions(item, type) {
        let path = this.$api.processingApi.getDemType;
        let param = {
          code: type, //根据dem类型查对应的服务数据
        };
        this.http.get(path, param).then((res) => {
          if (res.data.code == 0 && res.data.success) {
            let options = [];
            let demArr = res.data.data;
            if (JSON.stringify(demArr) != "[null]") {
              demArr.forEach((ele) => {
                options.push({ label: ele.name, value: ele.code });
              });
            }
            if (options.length < 1) {
              item.constraint.demCodeShow = false;
            } else {
              item.constraint.values = options;
            }
          } else {
            this.$Message.error(res.data.message);
          }
        });
      },
      selectChange(data, itemZ, list) {
      // 0表示全路径   1表示文件夹
      if (!list) return;
      let that = this;
      list.forEach((item) => {
        if (
            item.binding &&
            item.binding.name == itemZ.name &&
            item.binding.value == data
        ) {
          that.$set(item, "selectItem", false);
        }
        if (
            item.binding &&
            item.binding.name == itemZ.name &&
            item.binding.value != data
        ) {
          that.$set(item, "selectItem", true);
        }
      });
    },

 /**
  * 高级选项
  * */

    //显示高级设置
    showAdvancedSetting() {
      this.advancedSetting = true;

    },
    //过滤算法
    filterPreferenceData(data) {
      let that = this;
      this.pieRuntime.filterPreferenceData = []
      this.filterPreference = [];
      let path = this.$api.monitorApi.selectFilterData + data;
      this.http.get(path).then((res) => {
        res.data.data.algList.forEach((ele) => {
          // ele.taskReferenceName
          if (ele.taskReferenceName != null) {
            this.filterPreference.push({
              value: ele.taskReferenceName,
              label: decodeURI(ele.label),
            });
          }
        });
      });
    },
    /*获取高级设置的节点组*/
    getNodeGroupList() {
      let that = this;
      this.http
          .get(this.$api.monitorApi.getNodeGroup, {})
          .then((res) => {
            if (res.data.code == 0) {
              that.nodeGroupList = [
                { groupName: "所有节点", groupLabel: "0", id: "xx" },
              ].concat(res.data.data.nodeGroupList);
            } else {
              this.$Message.error(res.message);
            }
          })
          .catch((err) => {
            this.$Message.error(err.message);
          });
    },

    toRoute() {
      if (this.taskType == 1) {
        this.$router.push({
          path: "/qualityCheck",
          query: {
            from: "qualityCheckCommon",
          },
        });
      } else if (this.taskType == 2) {
        this.$router.push({
          path: "/processing",
          query: {
            from: "processingCommon",
          },
        });
      }
    },
    tdRightImg(type) {
      let img = {
        plus: require("./../../assets/icons/leftArrow.svg"),
        reduce: require("./../../assets/icons/downArrow.svg"),
      };
      return img[type];
    },
    // 校验基本参数
    dealWithSubmitGlobalParameter() {
      let globalParamData = this.globalItems;

      if (!globalParamData) return;

      for (let j = 0; j < globalParamData.length; j++) {
        if (
            globalParamData[j].mandatory == "true" &&
            (globalParamData[j].default === null ||
                globalParamData[j].default === "")
        ) {
          this.$Message.warning(globalParamData[j].label + "的值不能为空！");
          this.globalMandatoryFlag = false; //  标记
          break;
        } else {
          this.globalMandatoryFlag = true;
        }
      }
    },
    //  处理动态参数
    dealWithSubmitInputParameter(defaultParam) {
      let _this = this;
      let inputParamData = this.inputParamItems; //参数为二维数组的形式
      for (var i in inputParamData) {
        //遍历二维数组
        let inputData = inputParamData[i]; //一维数组
        let productionTypeValue = JSON.stringify(_this.productionTypeValue);
        if (
            productionTypeValue.indexOf("合成") != -1 &&
            inputData[0].groupAlgoId === "piesat.java.generate_production_name"
        ) {
          _this.dealWithMixProductData("paramMix", inputData);
        }
        if (
            productionTypeValue.indexOf("合成") != -1 &&
            inputData[0].groupAlgoId.indexOf("piesat.basic.img_clip") != -1
        ) {
          //algoId: piesat.basic.img_clip_enhance; piesat.basic.img_clip
          _this.dealWithMixProductData("imgClip", inputData);
        }
        if (
            productionTypeValue.indexOf("合成") != -1 &&
            inputData[0].groupAlgoId.indexOf(
                "piesat.basic.create_metadata_synthesis"
            ) != -1
        ) {
          _this.dealWithMixProductData("metadata", inputData);
        }
        for (let j = 0; j < inputData.length; j++) {
     /*     if (
              inputData[j].mandatory == true &&
              (inputData[j].default === null || inputData[j].default === "")
          ) {
            // alert(inputData[j].label + "的值不能为空！");
            this.$Message.warning(inputData[j].label + "的值不能为空！");
            this.inputMandatoryFlag = false; //  标记
            break;
          } else {*/
            this.inputMandatoryFlag = true;
          //}
        }
        if (this.inputMandatoryFlag == false) break;
        defaultParam.inputParam.push(inputData);
      }
    },
    dealWithMixProductData(type, data) {
      //参量-合成产品 所需要的的提交区域和时间尺度
      data.forEach((ele) => {
        switch (type) {
          case "paramMix":
            if (ele.name === "region") {
              ele.default = this.region.name;
            } else if (ele.name === "submitTime") {
              let time = this.currentTime.split("-").join("");
              if (time.length > 4 && time.length < 7) time = time + "m"; //month
              ele.default = time;
            } else if (ele.name === "method") {
              ele.default = this.mixTypeValue;
            }
            break;
          case "imgClip":
            if (ele.name === "InputGeoJson" || ele.name === "ClipRange") {
              ele.default = this.region.geometry;
              break;
            }
            break;
          case "metadata":
            if (ele.name === "RegionType") {
              // ele.default = this.region.classify;
            } else if (ele.name === "RegionCode") {
              ele.default = this.region.code;
            } else if (ele.name === "RegionName") {
              ele.default = this.region.name;
            }
            break;
        }
      });
    },
    //基本参数控制算法参数的显示和隐藏
    setDisplayHidBtnStyle() {
      //对显示隐藏按钮样式做判断
      let id = "globalParamId";
      let img = $("#" + id).find("img");

      //  this.globalItems &&
      //   this.globalItems.length > 0 &&
      if (this.showGlobalParameter && this.inputDisplayParamItems.length > 0) {
        img.show();
        $("#" + id).attr("flag", "display");
        $("#" + id).attr("title", "显示更多参数");

        img.attr("src", this.tdRightImg("plus"));
      } else if (
          this.showGlobalParameter &&
          this.inputDisplayParamItems.length < 1
      ) {
        img.hide();
      }
      this.setShowOrHidBtnStyle(0); //默认
    },

    /**
     *设置算法参数（不包括基本参数）显示更多和隐藏按钮
     flag==0 表示无基本参数状态(默认)下 界面初始化
     flag==1 表示在基本参数的情况下 点击基本参数显示更多时的 界面初始化（所有算法参数自动全部展开）
     */
    setShowOrHidBtnStyle(flag) {
      let hiddeItem = this.hiddenImputDtParam;
      let id = "";
      hiddeItem.forEach((element, index) => {
        id = element.groupName + "_" + index;
        id = this.getFormatId(id);
        let img = $("#" + id).find("img");

        if (flag == 1) {
          $("#" + id).attr("flag", "hidden");
          $("#" + id).attr("title", "隐藏参数");
          img.attr("src", this.tdRightImg("reduce"));
        } else {
          if (element.length < 1) {
            $("#" + id).css("display", "none");
          } else {
            $("#" + id).css("display", "block");
            img.attr("src", this.tdRightImg("plus"));
          }
        }
      });
    },
    //解决Dom元素标签id为特殊字符 根据元素id获取Dom对象失败问题
    getFormatId(srcString) {
      // 转义之后的结果
      var result = srcString;
      // javascript正则表达式中的特殊字符
      var jsSpecialChars = [
        "\\",
        "^",
        "$",
        "*",
        "?",
        ".",
        "+",
        "(",
        ")",
        "[",
        "]",
        "|",
        "{",
        "}",
      ];

      // jquery中的特殊字符,不是正则表达式中的特殊字符
      var jquerySpecialChars = [
        "~",
        "`",
        "@",
        "#",
        "%",
        "&",
        "=",
        "'",
        '"',
        ":",
        ";",
        "<",
        ">",
        ",",
        "/",
      ];

      for (var i = 0; i < jsSpecialChars.length; i++) {
        result = result.replace(
            new RegExp("\\" + jsSpecialChars[i], "g"),
            "\\" + jsSpecialChars[i]
        );
      }

      for (var i = 0; i < jquerySpecialChars.length; i++) {
        result = result.replace(
            new RegExp(jquerySpecialChars[i], "g"),
            "\\" + jquerySpecialChars[i]
        );
      }
      return result;
    },
    //基本参数和算法参数：显示更多参数或者隐藏参数
    displayInputDtParamBtn(data, index) {
      let id = "";
      let groupName = "";
      let btnName = "";

      if (data === "globalBtn") {
        //基本参数右侧控制按钮
        btnName = "globalBtn";
        id = "globalParamId";
      } else {
        //算法参数右上角显示控制按钮
        groupName = data.groupName; //当前表格算法分组
        id = groupName + "_" + index; //当前td id
        id = this.getFormatId(id);
      }

      let flag = $("#" + id).attr("flag");
      if (flag == "display") {
        //show more
        this.displayAlgoBtnStyle(data, index, id, btnName);
      } else if (flag == "hidden") {
        //hidden more
        this.hiddenAlgoBtnStyle(data, index, id, btnName);
      }
    },
    displayAlgoBtnStyle(data, index, id, btnName) {
      let img = $("#" + id).find("img");
      $("#" + id).attr("flag", "hidden");
      $("#" + id).attr("title", "隐藏参数");
      img.attr("src", this.tdRightImg("reduce"));

      if (btnName && data === btnName) {
        this.showInputParameter = !this.showInputParameter;
        //基本参数：展开所有算法参数
        if (!this.globalDisplayBtn) {
          this.displayAllParams();
          this.globalDisplayBtn = true;
        }
        //  this.displayAlgoParam(index)//显示单独算法的所有
        this.setShowOrHidBtnStyle(1);
      } else {
        this.displayAlgoParam(index);
      }
    },
    hiddenAlgoBtnStyle(data, index, id, btnName) {
      let img = $("#" + id).find("img");
      $("#" + id).attr("flag", "display");
      $("#" + id).attr("title", "显示更多参数");
      img.attr("src", this.tdRightImg("plus"));

      if (btnName !== "" && data === btnName)
        this.showInputParameter = !this.showInputParameter;
      else {
        this.hiddenAlgoParam(index);
      }
    },
    //显示表格隐藏算法参数
    displayAlgoParam(index) {
      let currentTableParam = this.inputDisplayParamItems[index];
      let hiddenParam = this.hiddenImputDtParam[index];

      let length = currentTableParam.length;
      for (let j = 0; j < hiddenParam.length; j++) {
        let tempHid = hiddenParam[j];
        this.inputDisplayParamItems[index].push(tempHid);
        // this.$nextTick(function() {
        //   this.$set(this.inputDisplayParamItems[index], length + j, tempHid);
        //   let len = length + j + 1;
        //   this.inputDisplayParamItems[index].splice(len);
        // });
      }
    },
    // 隐藏表格显示算法参数
    hiddenAlgoParam(index) {
      /**
       * 思路：1、获取当前表格数据源currentTableParam：根据当前点击的表格索引获取当前表格参数
       * 2、移除表格数据源要隐藏的参数：currentTableParam和全局的隐藏参数hiddenParam进行比对 如果hiddenParam的参数和currentTableParam参数相同则移除currentTableParam对应的参数
       * 3、更新隐藏参数列表：在2的基础上判断当前全局的hiddenParam和已经显示到表格中的隐藏参数值是否发生变化 是 用currentTableParam最新的参数替换隐藏参数中对应参数
       */
      let currentTableParam = this.inputDisplayParamItems[index];
      let hiddenParam = this.hiddenImputDtParam[index];

      for (let i = 0; i < currentTableParam.length; i++) {
        let tempItem = currentTableParam[i];
        hiddenParam.forEach((element, index1) => {
          if (tempItem.name === element.name) {
            currentTableParam.splice(i, 1); //删除索引i的1个元素
            i--; //必须有
            // if (tempItem.default !== element.default) {
            //   // hiddenParam.findIndex(item => item === tempHid),//返回元素索引
            //   hiddenParam[j].splice(j, 1, tempItem); //在索引为indexx1的位置删除一个元素再添加一个元素对象 tempItem
            // }
          }
        });
      }
    },
    //点击全局参数显示更多后显示所有算法的所有参数
    displayAllParams() {
      let _this = this;
      let display = this.inputDisplayParamItems;
      display.forEach((ele, index) => {
        _this.displayAlgoParam(index);
      });
    },

    /************************ 以下为目录浏览功能 ************************/
    //文件浏览功能
    browserFile(item) {
      let that = this;
      item.tuisong = "";
      this.currentItem = item;
      this.fileCatalogModal = true;
      this.$nextTick(() => {
        that.$refs.refFileCatalogModal.initFileTree(item, that.isBatch);
      });
    },
    browserRef(item) {
      let that = this;
      this.spatialRefManageModal = true;
      this.currentItem = item;
      this.$nextTick(() => {
        that.$refs.refSpatialRefManageModal.initRefTree(item);
      });
    },
    fileCatalogModalOk(data) {
      this.currentItem.default = data;
      this.fileCatalogModal = false;

      // this.currentItem.constraint.defaultType = "path";
      // this.currentItem.tempDefault = data;

      // this.setQuery(data, this.currentItem);
      // this.isQueryChange(data, this.currentItem);
    },
    fileCatalogModalClose() {
      this.fileCatalogModal = false;
    },
    spatialRefManageModalOk() {
      this.spatialRefManageModal = false;
      this.currentItem.default = data;
    },
    spatialRefManageModalClose() {
      this.spatialRefManageModal = false;
    },

    /************************以上文件浏览功能 ************************/

  }



}
</script>


<style lang="scss" scoped>
.inputTd {
  float: left;
  width: 88%;
  margin: 3px 0;
  margin-left: 5px;
}
.btnBrowser {
  float: right;
  margin-top: 8px;
  margin-bottom: 0px;
}

.paramBtn {
  border: 0;
  color: #95a5bc;
}
.jia {
  width: 12px;
  height: 12px;
  margin: -15px 0 3px -6px;
}

.imgBtn {
  position: absolute;
  right: 11px;

  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.tbHeader {
  width: 100%;
  display: inline-block;
}

header {
  flex: 0 0 auto;
}

</style>

<style scoped>
/*表单错误提示*/
.processingModal
.paramTable
.ivu-form-item-error-tip
/deep/
.ivu-form-item-error-tip {
  right: 3px !important;
  top: 11px !important;
  width: 147px !important;
}
/deep/ .form-control {
  padding: 0 10px !important;
}
/*.processingModal .paramTable   .inputSelectTd /deep/ .form-control {
        padding-left: 0;
        padding-right: 13px;
      }*/


table{
  border: 0!important;
  background-color: var(--ten-color, #cbe5f5);
  margin-bottom: 0!important;
}
tr {
  text-align: center;
  vertical-align: center;
}
td{
  border:0!important;
  text-align: right;
  vertical-align: center;
  width: 220px;
}



.btnBrowser {
  margin-top: 5px;
  margin-bottom: 0px;
  width: 45px;
  height: 30px;
}

.form-row{
  margin-right: 0;
}
.form-group{
  margin-bottom: 0;
}

@media (min-width: 576px){
  /deep/.col-sm-9 {
    max-width: 100%!important;
    width: 100%!important;
    padding-right: 80px;
    flex: 0 0 100%;
    box-sizing: border-box;
  }
}


/deep/.ivu-radio-group {
  display: inline-block;
  font-size: 14px;
  vertical-align: middle;
  text-align: center;
  width: 277px;
  margin-top: 8px;
}
</style>


